import React from 'react';
import {StyleSheet, Text, View, Platform, ScrollView} from 'react-native';
import {Rating, AirbnbRating} from '@rneui/themed';
import {Tester, TestSuite, TestCase} from '@rnoh/testerino';

const WATER_IMAGE = require('./images/water.png');

type RatingsComponentProps = {};

const Ratings: React.FunctionComponent<RatingsComponentProps> = () => {
  const ratingCompleted = (rating: number) => {
    console.log('Rating is: ' + rating);
  };

  const ratingProps = {};
  return (
    <Tester>
      <TestSuite name="Ratings">
        <ScrollView style={{...styles.viewContainer}}>
          <TestCase itShould="Airbnb-style Tap Ratings" tags={['C_API']}>
            <Text
              style={[
                styles.titleText,
                {marginTop: 30, color: '#e74c3c', fontSize: 22},
              ]}>
              Airbnb-style Tap Ratings
            </Text>
            <AirbnbRating />
          </TestCase>
          <TestCase itShould="Airbnb-style Tap Ratings" tags={['C_API']}>
            <AirbnbRating
              count={11}
              reviews={[
                'Terrible',
                'Bad',
                'Meh',
                'OK',
                'Good',
                'Hmm...',
                'Very Good',
                'Wow',
                'Amazing',
                'Unbelievable',
                'Jesus',
              ]}
              defaultRating={11}
              size={20}
            />
          </TestCase>
          <TestCase itShould="Whatsapp-style Swipe Ratings" tags={['C_API']}>
            <Text
              style={[
                styles.titleText,
                {marginTop: 30, color: '#9b59b6', fontSize: 22},
              ]}>
              Whatsapp-style Swipe Ratings
            </Text>
            <View
              style={{
                justifyContent: 'center',
                alignItems: 'center',
                marginBottom: 30,
              }}>
              <Rating
                showRating
                imageSize={40}
                onFinishRating={ratingCompleted}
                {...ratingProps}
                style={{paddingVertical: 10}}
              />
              <Rating
                showRating
                type="star"
                fractions={1}
                startingValue={3.6}
                readonly={true}
                imageSize={40}
                onFinishRating={ratingCompleted}
                style={{paddingVertical: 10}}
              />
              <Rating
                type="custom"
                ratingImage={WATER_IMAGE}
                ratingColor="#3498db"
                ratingCount={10}
                imageSize={30}
                onFinishRating={ratingCompleted}
                showRating
                style={{paddingVertical: 10}}
              />
              <Rating
                type="heart"
                ratingCount={3}
                fractions={2}
                startingValue={1.57}
                imageSize={40}
                onFinishRating={ratingCompleted}
                showRating
                style={styles.rating}
              />
            </View>
          </TestCase>
        </ScrollView>
      </TestSuite>
    </Tester>
  );
};
const styles = StyleSheet.create({
  headingContainer: {
    paddingTop: 50,
  },
  titleText: {
    fontSize: 25,
    fontWeight: 'bold',
    textAlign: 'center',
    paddingVertical: 5,
    color: '#27ae60',
  },
  subtitleText: {
    fontSize: 18,
    fontWeight: '400',
    textAlign: 'center',
    color: '#34495e',
  },
  viewContainer: {
    // flex: 1,
  },
  rating: {
    paddingVertical: 10,
  },
  titleStyle: {
    fontWeight: 'bold',
    fontSize: 24,
  },
});

export default Ratings;
